<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>多视图</title>
		<!--<script src="js/d3v4.js"></script>-->
		<script type="text/javascript" src="js/d3.v3.js"></script>
		<script type="text/javascript" src="js/jquery-3.1.1.js"></script>

		<style>
			div {
				/*是div不是#div*/
				/*border-bottom: 1px solid #ddd;*/
				border: 2px solid #ddd;
				/*box-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);*/
				background: white;
				margin: 20;
				padding: 10px;
			}
			
			#block_one {
				position: relative;
				/*position: relative;*/
				float: left;
				height: 500px;
				width: 1100px;
				/*background: #96D1AF;*/
			}
			
			#block_two {
				position: relative;
				float: left;
				width: 350px;
				height: 500px;
				/*background: #FFDCDA;*/
			}
			
			#block_three {
				float: left;
				height: 200px;
				width: 450px;
				/*top: 540px;*/
				/*background: #FFFFB9;*/
			}
			
			#block_four {
				position: relative;
				float: left;
				/*clear: both;*/
				height: 200px;
				/*top: 540px;*/
				/*background: #DDE3E3;*/
				width: 1000px;
			}
			
			#block_one rect:hover {
				fill: orange;
			}
			
			#block_one .hidden{
				display: none;
			}
			
			#block_one p {
				margin: 0;
				font-family: sans-serif;
				font-size: 16px;
				line-height: 20px;
			}
			#block_four text {
				font-family: sans-serif;
				font-size: 12px;
				fill: white;
			}
		</style>
	</head>

	<body>
		<div id="block_one">
				<p class="tooltip" class="hidden"><strong>Important Label Heading</strong></p>
				<p class="tooltip" class="hidden"><span id="value">100</span>%</p>	
		</div>
		<div id="block_two"></div>
		<div id="block_three"></div>
		<div id="block_four"></div>
		<script type="text/javascript" src="js/block_one.js"></script>
		<script type="text/javascript" src="js/block_two.js"></script>
		<script type="text/javascript" src="js/block_three.js"></script>
		<script type="text/javascript" src="js/block_four.js" ></script>
	</body>
</html>